<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>客户设备维护通知</title>
    <link rel="stylesheet" href="./index.css" />
    <style>
      #maintain {
        height: 100vh;
        background-color: #f5f5f5;
      }
    </style>
  </head>

  <body>
    <div id="maintain">
      <van-form @submit="onSubmit" style="margin-bottom: 200px">
        <div>客户设备维护通知</div>
        <div>1、客户报修</div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="clientName"
                label="客户类型"
                placeholder="请选择客户类型"
                @click="showPopup('1')"
                :rules="[{ required: true, message: '请选择客户类型' }]"
              />
            </div>
            <div>
              <van-field
                v-model="OrderIssuingDepartment"
                required
                center
                clearable
                label="发单部门"
                placeholder="请输入发单部门"
              >
              </van-field>
            </div>
            <div>
              <van-cell-group>
                <van-field label="编号" :value="serialNumber" readonly />
              </van-cell-group>
            </div>
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="RepairRequestTime"
                label="报修时间"
                placeholder="点击选择报修时间"
                @click="showPopup('2')"
                :rules="[{ required: true, message: '请选择报修时间' }]"
              />
            </div>
            <div>
              <van-field
                v-model="equipment"
                required
                center
                clearable
                label="故障设备"
                placeholder="请输入故障设备"
              >
              </van-field>
            </div>
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="damagedCondition"
                label="损坏程度"
                placeholder="请选择损坏程度"
                @click="showPopup('3')"
                :rules="[{ required: true, message: '请选择损坏程度' }]"
              />
            </div>
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="urgency"
                label="紧急程度"
                placeholder="请选择紧急程度"
                @click="showPopup('4')"
                :rules="[{ required: true, message: '请选择紧急程度' }]"
              />
            </div>
            <div>
              <van-field
                v-model="faultDescription"
                required
                center
                clearable
                label="故障简述"
                placeholder="请输入故障简述"
              >
              </van-field>
            </div>
            <div>
              <van-cell title="附件(多选)">
                <template #right-icon>
                  <van-uploader>
                    <van-icon name="plus" />
                  </van-uploader>
                </template>
              </van-cell>
            </div>
          </div>
        </div>
        <!-- <div style="margin: 16px; margin-bottom: 200px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div> -->
      </van-form>
      <div
        style="
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 15px;
          background-color: white;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          z-index: 1000;
        "
      >
        <van-button
          type="primary"
          block
          @click="onHold"
          style="margin-bottom: 10px"
        >
          暂存</van-button
        >
        <van-button type="danger" block @click="onSubmitApproval ">
          提交审批</van-button
        >
      </div>
      <van-popup position="bottom" v-model="show">
        <div v-if="popupType === '1'">
          <van-picker
            title="请选择客户类型"
            show-toolbar
            :columns="columns"
            @confirm="onPickerConfirm"
            @cancel="show = false"
            value-key="text"
          />
        </div>
        <div v-else-if="popupType === '2'">
          <van-datetime-picker
            :value="startTime"
            type="datetime"
            title="选择完整时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onPickerConfirm"
            @cancel="onCancel"
          />
        </div>
        <div v-else-if="popupType === '3'">
          <van-picker
            title="请选择损坏程度"
            show-toolbar
            :columns="columns3"
            @confirm="onPickerConfirm"
            @cancel="show = false"
            value-key="text"
          />
        </div>
        <div v-else-if="popupType === '4'">
          <van-picker
            title="请选择紧急程度"
            show-toolbar
            :columns="columns4"
            @confirm="onPickerConfirm"
            @cancel="show = false"
            value-key="text"
          />
        </div>
      </van-popup>
    </div>
  </body>
  <script src="./vue.min.js"></script>
  <script src="./vant.min.js"></script>
  <script>
    var maintain = new Vue({
      el: "#maintain",
      data() {
        const now = new Date();
        const minDate = new Date(now);
        minDate.setFullYear(now.getFullYear() - 1);
        const maxDate = new Date(now);
        maxDate.setFullYear(now.getFullYear() + 1);
        return {
          box: "",
          place: "",
          show: false,
          popupType: "",
          startTime: "", // 组件默认时间设置 今天请假开始时间
          endTime: "", // 组件默认时间设置 今天请假结束时间
          minDate, // 去年今日
          maxDate, // 明年今日
          textValue: "", // 请假事由
          radio: "", // 单选框
          remark: "", // 备注
          duration1: "", // 时长
          list: [
            { id: 1, name: "订单A", desc: "2025-10-23 14:30" },
            { id: 2, name: "订单B", desc: "2025-10-23 15:20" },
          ],
          columns: [
            { id: 322, text: "年假" },
            { id: 324, text: "病假" },
            { id: 325, text: "婚假" },
            { id: 885, text: "侍产假" },
            { id: 886, text: "丧假" },
            { id: 890, text: "产假" },
            { id: 888, text: " 无薪假" },
            { id: 889, text: "其它(只适用于新加坡公司)" },
            { id: 323, text: "事假" },
            { id: 887, text: "补休" },
          ],
          columns3: [
            { id: 1, text: "损坏" },
            { id: 2, text: "失灵" },
            { id: 3, text: "泄漏" },
            { id: 4, text: "流速低" },
            { id: 5, text: "计量不准" },
          ],
          columns4: [
            { id: 6, text: "特别严重（I级）" },
            { id: 7, text: "严重（II级）" },
            { id: 8, text: "较重(III级)" },
            { id: 9, text: "一般(IV级)" },
          ],
          clientType: "", // 客户类型
          clientName: "", // 客户名称
          OrderIssuingDepartment: "", // 发单部门
          serialNumber: "自动编号", // 编号
          RepairRequestTime: "", // 报修时间
          equipment: "", // 设备
          damagedCondition: "", // 损坏程度
          damagedConditionCode: "", // 损坏程度状态码
          urgency: "", // 紧急程度
          urgencyCode: "", // 紧急程度状态码
          faultDescription: "", // 故障描述
        };
      },
      computed: {},
      created() {},
      mounted() {},
      methods: {
        showPopup(value) {
          //  点击打开弹出层
          this.popupType = value;
          this.show = true;
        },
        onPickerConfirm(value) {
          console.log(value, this.popupType);

          //  点击确认选择日期
          if (this.popupType === "2") {
            this.RepairRequestTime = this.formatDate(value);
          } else if (this.popupType === "3") {
            this.damagedCondition = value.text;
            this.damagedConditionCode = value.id;
            console.log(value, value.id, value.text);
          } else if (this.popupType === "4") {
            this.urgency = value.text;
            this.urgencyCode = value.id;
            console.log(value, value.id, value.text);
          } else if (this.popupType === "1") {
            this.clientType = value.id;
            this.clientName = value.text;
            console.log(value, value.id, value.text);
          }
          this.show = false;
        },
        onCancel() {
          // 点击取消选择日期
          if (this.popupType === "2") {
            this.startTime = "";
          } else if (this.popupType === "3") {
            this.endTime = "";
          }
          this.show = false;
        },
        formatDate(date) {
          // 格式化日期为 YYYY-MM-DD HH:mm 格式
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");
          const hours = String(date.getHours()).padStart(2, "0");
          const minutes = String(date.getMinutes()).padStart(2, "0");
          return `${year}-${month}-${day} ${hours}:${minutes}`;
        },
        onSubmit(values) {
          console.log("submit", values);
        },
        checkout() {
          // 判断每个都都有没值
          if (!this.clientType) {
            this.$toast("请选择客户类型");
            return false;
          }
          if (!this.OrderIssuingDepartment) {
            this.$toast("请输入发单部门");
            return false;
          }
          if (!this.RepairRequestTime) {
            this.$toast("请选择报修时间");
            return false;
          }
          if (!this.equipment) {
            this.$toast("请输入设备");
            return false;
          }
          if (!this.damagedConditionCode) {
            this.$toast("请选择损坏程度");
            return false;
          }
          if (!this.urgencyCode) {
            this.$toast("请选择紧急程度");
            return false;
          }
          if (!this.faultDescription) {
            this.$toast("请输入故障描述");
            return false;
          }
          return true;
        },
        onHold() {
          // 暂存
          if (!this.checkout()) {
            return;
          }
          console.log("暂存");
          console.log(this.startTime);
          console.log(this.endTime);
          console.log(this.textValue);
          console.log(this.remark);
        },
        onSubmitApproval() {
          // 提交审批
          if (!this.checkout()) {
            return;
          }
          console.log("提交审批");
        },
      },
    });
  </script>
</html>
